﻿// Dimensione del box
cSize = 30;

function setupVideo() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");

    lastMouse = null;
    // Intercetto il movimento del mouse
    canvas.addEventListener("mousemove", function (e) { lastMouse = e; });
    canvas.addEventListener("mouseout", function (e) { lastMouse = null; });

    video = document.getElementById("video");

    setInterval(draw, 1000 / 30);
    //setTimeout(draw, 5000);
}

function draw() {
    // Ridimensiono il canvas in base alla dimensione del video
    canvas.width = 340;
    canvas.height = 200;
    // Disegno il frame corrente
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    if (video.videoWidth > 0) {
        // Ottengo i pixel del canvas
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

        var grayValue = 0.4;
        for (var x = 0; x < imageData.data.length; x += 4) {
            // Calcolo la posizione del pixel corrente
            var py = Math.floor(x / (canvas.width * 4));
            var px = (x % (canvas.width * 4)) / 4;

            // Se il pixel è nell'area intorno al mouse
            if (!lastMouse || px < lastMouse.offsetX - cSize || px > lastMouse.offsetX + cSize
                        || py < lastMouse.offsetY - cSize || py > lastMouse.offsetY + cSize) {
                var c = (imageData.data[x] + imageData.data[x + 1] + imageData.data[x + 2]) / 3 * grayValue;
                // RGBA
                imageData.data[x] = c;
                imageData.data[x + 1] = c;
                imageData.data[x + 2] = c;
            }
        }

        // Associo i nuovi pixel da mostrare
        context.putImageData(imageData, 0, 0);
    }
}